<!DOCTYPE html>
<html lang="en">
<head>
<title>Contacts</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="css/layout.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery-1.6.js" ></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/cufon-replace.js"></script>
<script type="text/javascript" src="js/Swis721_Cn_BT_400.font.js"></script>
<script type="text/javascript" src="js/Swis721_Cn_BT_700.font.js"></script>
<script type="text/javascript" src="js/tabs.js"></script>
<script type="text/javascript" src="js/jquery_validate.js"></script>

<!--[if lt IE 9]>
  	<script type="text/javascript" src="js/html5.js"></script>
	<style type="text/css">
		.bg{ behavior: url(js/PIE.htc); }
	</style>
<![endif]-->
<!--[if lt IE 7]>
		<div style=' clear: both; text-align:center; position: relative;'>
			<a href="http://www.microsoft.com/windows/internet-explorer/default.aspx?ocid=ie6_countdown_bannercode"><img src="http://www.theie6countdown.com/images/upgrade.jpg" border="0"  alt="" /></a>
		</div>
<![endif]-->
</head>
<body id="page5">
	<div class="body1">
	<div class="body2">
	<div class="body5">
		<div class="main">
<!-- header -->
			<header>
				<div class="wrapper">
				<h1><a href="index.html" id="logo">LOGO</a></h1>
				  <form id="newsletter" method="post" action="ValidarLogin.php">
                       <input class="input" name="textMailUsuario" type="text" value="Ingrese su Email"  onBlur="if(this.value=='') this.value='Ingrese su Email'" onFocus="if(this.value =='Ingrese su Email' ) this.value=''" > 
                       &nbsp;  &nbsp; 
                       <input class="input" name="textPasswordUsuario" type="password" value="Ingrese su Password"  onBlur="if(this.value=='') this.value='Ingrese su Password'" onFocus="if(this.value =='Ingrese su Password' ) this.value=''" >
                      <a href="#" id="BTNsubmit" class="button" onclick="ValidarLogin()">Ingresar</a>                      
                       <a href="Contacto.html" id="BTNregistrar" class="button" >Registrarse</a>

                      </form>  <div id="MensajeLogin"></div>
				</div>
			</header>
<!-- header end-->
		</div>
	</div>
	</div>
	</div>
	<div class="body3">
		<div class="main">
<!-- content -->
			<article id="content">
				<div class="wrapper">
					<section class="col1">
						<h2 class="under">Formulario registro</h2>
                        <form id="ContactForm"  method="post" action="Registrar.php">
						<div>
                        	<div  id="txt_nombre" class="wrapper">
								<span>Nombre:   (*)</span>
								<input type="text" class="input" name="nombre" >
							</div> 
							<div  id="txt_email" class="wrapper">
								<span>Email:   (*)</span>
								<input type="text" class="input" name="email" id="email">
                                <div id="MensajeUsuarioValido"></div>
							</div>
							<div  id="txt_pass" class="wrapper">
								<span>Password:   (*)</span>
								<input type="password" class="input" name="pass" id="passwd">
						  </div>
							<div  id="txt_pass_confirm" class="wrapper">
								<span>Confirm pass:(*)</span>
								<input type="Password" class="input" name="pass2" >
						  </div>
							
							<a href="#" class="button" onClick="ValidarRegistro()">Enviar</a>
                           
							<a href="#" onClick="document.getElementById('ContactForm').reset()">Limpiar</a>
						</div>
					</form>
                    <BR>  <BR>  <BR>  <BR> 
					</section>
				</div>

			</article>
		</div>
	</div>
	<div class="body3">
		<div class="main">
			<article id="content2">
				<div class="wrapper"></div>
			</article>
<!-- content end -->
		</div>
	</div>
		
<script type="text/javascript"> Cufon.now(); </script>
<script>

$('#email').focusout( function(){
    if($('#email').val()!= ""){
        $.ajax({
            type: "POST",
            url: "validarMailExistente.php",
            data: "email="+$('#email').val(),
			beforeSend: function(){
              $('#MensajeUsuarioValido').html('<img src="images/loader.gif"/> verificando');
            },
            success: function( respuesta ){
              if(respuesta == '1')
                $('#MensajeUsuarioValido').html("<p style='color:green;'> Email Disponible </p>");
              else
                $('#MensajeUsuarioValido').html("<p style='color:red;'> Email No Disponible </p>");
            }
        });
    }
});


function ValidarRegistro(){
  var form = $("#ContactForm");
   	form.validate({
                	rules: {
                   	 'nombre': {required: true, minlength:3, maxlength:15},
                   	 'email': {required: true, email: true},
                  	 'pass': {required: true, minlength:6, maxlength:10},
					 'pass2': { equalTo: "#passwd"}
              		  },
             	  messages: {
                   			 'nombre': { 	required: "<p style='color:red;'> Ingrese su Nombre </p> <br><br>",
							                minlength:"<p style='color:red;'> Minimo 3 caracteres.- </p>",
											maxlength:"<p style='color:red;'> Maximo 15 caracteres.- </p>"
										},
                   	 		 'email':  {	required: "<p style='color:red;'> Ingrese su Email </p> <br><br>", 
							  			    email: "<p style='color:red;'> Ingrese formato correcto: nombre@Dominio.cl </p> <br><br>"
										},
                  	 			'pass': {   required: "<p style='color:red;'> Ingrese password </p> <br><br>",
											minlength:"<p style='color:red;'> Minimo 6 caracteres.- </p>",
											maxlength:"<p style='color:red;'> Maximo 10 caracteres.- </p>"},
					 'pass2': { equalTo: "<p style='color:red;'> Password No Coincide! </p> <br><br>"}
              		  },
				
            });
			
		form.submit();
              
  }
	
	

 $(document).ready(function(e) {
    var mensaje = $.get("error");
	
	if(mensaje == "true"){
    $("#MensajeLogin").html("<br><p style='color:red;'> Email y/o contraseña Incorrecto, ingrese nuevamente.- </p>");
}
});



function ValidarLogin(){
	
	var form = $("#newsletter");
    form.submit();
	
	}
	
(function($) {  
    $.get = function(key)   {  
        key = key.replace(/[\[]/, '\\[');  
        key = key.replace(/[\]]/, '\\]');  
        var pattern = "[\\?&]" + key + "=([^&#]*)";  
        var regex = new RegExp(pattern);  
        var url = unescape(window.location.href);  
        var results = regex.exec(url);  
        if (results === null) {  
            return null;  
        } else {  
            return results[1];  
        }  
    }  
})(jQuery);  


	


	
	
</script>
</body>
</html>